<!--
 The BSD 3-Clause License

 Copyright 2022 - DATATRONiQ GmbH (https://datatroniq.com)
 Copyright (c) 2018-2022 Klaus Landsdorf (http://node-red.plus/)
 All rights reserved.
 node-red-contrib-iiot-opcua
-->

<script type="text/javascript">
  RED.nodes.registerType('OPCUA-IIoT-Result-Filter', {
    category: 'IIoT',
    color: '#ABCDEF',
    defaults: {
      nodeId: {value: "", required: true},
      datatype: {value: ""},
      fixedValue: {value: false},
      fixPoint: {value: 2},
      withPrecision: {value: false},
      precision: {value: 2},
      entry: {value: 1, validate: RED.validators.number()},
      justValue: {value: true},
      withValueCheck: {value: false},
      minvalue: {value: null},
      maxvalue: {value: null},
      defaultvalue: {value: null},
      topic: {value:""},
      name: {value: ""},
      showErrors: {value: false}
    },
    inputs: 1,
    outputs: 1,
    align: "left",
    icon: "icon.png",
    label: function () {
      return this.name || this.nodeId || "Result Filter";
    },
    labelStyle: function () {
      return this.name ? "node_label_italic" : "";
    },
    oneditprepare: function () {
      let node = this
      node.lookupItems = []

      let tabs = RED.tabs.create({
        id: "node-input-result-filter-tabs",
        onchange: function (tab) {
          $("#node-input-result-filter-tabs-content").children().hide()
          $("#" + tab.id).show()
        }
      })

      tabs.addTab({
        id: "opcuaiiot-result-filter-tab-settings",
        label: this._("opcua-iiot-contrib.tabs-label.settings")
      })

      tabs.addTab({
        id: "opcuaiiot-result-filter-tab-convert",
        label: this._("opcua-iiot-contrib.tabs-label.convert")
      })

      let datatypeLookupButton = $("#node-lookup-datatype")
      let datatypeField = $("#node-input-datatype")

      datatypeLookupButton.on("click", function () {
        datatypeLookupButton.addClass('disabled')
        $.getJSON('opcuaIIoT/list/DataTypeIds', function (data) {
          datatypeLookupButton.removeClass('disabled')
          node.lookupItems = []

          $.each(data, function (i, entry) {
            node.lookupItems.push({value: entry.nodeId, label: entry.label})
          })

          datatypeField.autocomplete({
            source: node.lookupItems,
            minLength: 0,
            focus: function (event, ui) {
              datatypeField.val(ui.item.label);
              return false;
            },
            select: function (event, ui) {
              datatypeField.val(ui.item.label)
              return false;
            },
            close: function (event, ui) {
              datatypeField.autocomplete("destroy")
            }
          }).autocomplete("search", "")
        })
      })

      $('#node-input-withValueCheck').change(function () {
        if ($(this).is(":checked")) {
          $('#node-value-changes').show()

        } else {
          $('#node-value-changes').hide()
        }
      })
    }
  });
</script>

<script type="text/x-red" data-template-name="OPCUA-IIoT-Result-Filter">
    <div class="form-row">
        <ul style="background: #fff; min-width: 600px; margin-bottom: 20px;" id="node-input-result-filter-tabs"></ul>
    </div>
    <div id="node-input-result-filter-tabs-content" style="min-height: 170px;">
        <div id="opcuaiiot-result-filter-tab-settings" style="display:none">
            <div class="form-row">
                <label for="node-input-nodeId"><i class="icon-tasks"></i> <span data-i18n="opcua-iiot-contrib.label.nodeId"></span></label>
                <input type="text" id="node-input-nodeId" placeholder="ns=1;s=MySwitch or ns=1;i=1234">
            </div>
            <div class="form-row">
                <label for="node-input-datatype"><i class="icon-search"></i> <span data-i18n="opcua-iiot-contrib.label.datatype"></span></label>
                <input type="text" id="node-input-datatype" style="width:40%;" placeholder="i=2041">
                <a id="node-lookup-datatype" class="btn"><i id="node-lookup-topic-icon" class="fa fa-search"></i></a>
            </div>
            <hr>
            <div class="form-row">
                <label for="node-input-entry"><i class="icon-tag"></i>
                <span data-i18n="opcua-iiot-contrib.label.entry"></span></label>
                <input type="text" id="node-input-entry" placeholder="1">
            </div>
            <hr>
            <div class="form-row">
                <label style="min-width:160px" for="node-input-justValue"><i class="fa fa-simplybuilt"></i>
                <span data-i18n="opcua-iiot-contrib.label.justValue"></span></label>
                <input type="checkbox" id="node-input-justValue" style="max-width:30px">
            </div>
            <div class="form-row">
                <label style="min-width:160px" for="node-input-withValueCheck"><i class="fa fa-optin-monster"></i>
                <span data-i18n="opcua-iiot-contrib.label.withValueCheck"></span></label>
                <input type="checkbox" id="node-input-withValueCheck" style="max-width:30px">
            </div>
            <div class="form-row" id="node-value-changes">
                <div class="form-row">
                    <label for="node-input-minvalue"><i class="icon-tag"></i>
                    <span data-i18n="opcua-iiot-contrib.label.minvalue"></span></label>
                    <input type="text" id="node-input-minvalue" placeholder="minimum">
                </div>
                <div class="form-row">
                    <label for="node-input-maxvalue"><i class="icon-tag"></i>
                    <span data-i18n="opcua-iiot-contrib.label.maxvalue"></span></label>
                    <input type="text" id="node-input-maxvalue" placeholder="maximum">
                </div>
                <div class="form-row">
                    <label for="node-input-defaultvalue"><i class="icon-tag"></i>
                    <span data-i18n="opcua-iiot-contrib.label.defaultvalue"></span></label>
                    <input type="text" id="node-input-defaultvalue" placeholder="out of range value">
                </div>
            </div>
            <div class="form-row">
                <label for="node-input-topic"><i class="icon-tag"></i> <span data-i18n="node-red:common.label.topic"></span></label>
                <input type="text" id="node-input-topic" placeholder="">
            </div>
            <div class="form-row">
                <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
                <input type="text" id="node-input-name" placeholder="">
            </div>
            <hr>
            <div class="form-row">
                <label style="min-width:160px" for="node-input-showErrors"><i class="fa fa-exclamation-circle"></i>
                <span data-i18n="opcua-iiot-contrib.label.showErrors"></span></label>
                <input type="checkbox" id="node-input-showErrors" style="max-width:30px">
            </div>
        </div>
        <div id="opcuaiiot-result-filter-tab-convert" style="display:none">
            <div class="form-row">
                <label style="min-width:160px" for="node-input-fixedValue"><i class="fa fa-eye-slash"></i>
                <span data-i18n="opcua-iiot-contrib.label.fixedValue"></span></label>
                <input type="checkbox" id="node-input-fixedValue" style="max-width:30px">
            </div>
            <div class="form-row">
                <label for="node-input-fixPoint"><i class="icon-tag"></i>
                <span data-i18n="opcua-iiot-contrib.label.fixPoint"></span></label>
                <input type="text" id="node-input-fixPoint" placeholder="2">
            </div>
            <hr>
            <div class="form-row">
                <label style="min-width:160px" for="node-input-withPrecision"><i class="fa fa-eye-slash"></i>
                <span data-i18n="opcua-iiot-contrib.label.withPrecision"></span></label>
                <input type="checkbox" id="node-input-withPrecision" style="max-width:30px">
            </div>
            <div class="form-row">
                <label for="node-input-precision"><i class="icon-tag"></i>
                <span data-i18n="opcua-iiot-contrib.label.precision"></span></label>
                <input type="text" id="node-input-precision" placeholder="2">
            </div>
        </div>
    </div>
</script>

<script type="text/x-red" data-help-name="OPCUA-IIoT-Result-Filter">
    <h2>OPC UA IIoT Result Filter</h2>

    <p>
    The Result Filter node handles your Read and Listener output
    and provides the value at the first out and a complex object at the second out.
    </p>

    <h3>Input</h3>
    <p>The input works with message objects from Read or Listener node.</p>

    <p>For the read results you have to set the array entry to the correct value of where the value is to find!</p>

    <h3>Output</h3>
    <div>
        <ul>
            <li>payload (filtered and converted result)
        </ul>
    </div>

    <p>With the to fixed you can setup for Number objects.</p>

    <p>With the precision you can setup for Number objects.</p>

    <p>If there is nothing to convert (data type, precision), then Output 1 and 2 will equal.</p>

    <strong>
        <span data-i18n="opcua-iiot-contrib.label.justValue"></span>
    </strong>
    <p>With that option, the node does not send an object on out two for less CPU load.</p>

    <strong>Name</strong>
    <p>Name in the flow of Node-RED.</p>

    <p>Set showErrors to get errors from node-opcua on browse.</p>
</script>
